<template>
	<view class="taskFilling">
		<view class="insContent">
			<uni-section title="巡检项" type="line">
				<uni-list>
					<uni-list-item title="坝体">
						<template v-slot:footer>
							<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
						</template>
					</uni-list-item>
					<uni-list-item title="坝体">
						<template v-slot:footer>
							<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
						</template>
					</uni-list-item>
					<uni-list-item title="坝体">
						<template v-slot:footer>
							<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
						</template>
					</uni-list-item>
					<uni-list-item title="坝体">
						<template v-slot:footer>
							<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
						</template>
					</uni-list-item>
					<uni-list-item title="坝体">
						<template v-slot:footer>
							<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
						</template>
					</uni-list-item>
					<uni-list-item title="坝体">
						<template v-slot:footer>
							<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
		</view>

		<view class="insContent increaseStyle">
			<uni-section title="巡检项" type="line">
				<custom-tree-select
					ref="customTreeSelect"
					mutiple
					clearable
					search
					:choseParent="false"
					dataLabel="text"
					dataValue="value"
					:listData="listData"
					v-model="inputValue"
					:disabledList="[6]"
					@removeSelect="removeSelect"
					class="customTreeSelect"
				></custom-tree-select>
				<view :style="{ top: !tabBarHeight ? 43 * 2 + 'rpx' : tabBarHeight * 2 + 'rpx' }" class="increase" @click="triggerComponentMethod">添加</view>
				<view>
					<uni-list v-for="(item, index) in matchedData" :key="index">
						<uni-list-item :title="item.text">
							<!-- <template v-slot:footer>
								<u-icon @click="matchedIcon(item)" name="trash"></u-icon>
							</template> -->
						</uni-list-item>
					</uni-list>
				</view>
			</uni-section>
		</view>
		<view class="insContent margin-bottom">
			<uni-section title="巡周总结" type="line">
				<uni-list v-for="(item,index) in ">
					<uni-list-item title="坝体">
						<template v-slot:footer>
							<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
						</template>
					</uni-list-item>
					<uni-list-item title="坝体">
						<template v-slot:footer>
							<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
						</template>
					</uni-list-item>
					<uni-list-item title="坝体">
						<template v-slot:footer>
							<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
						</template>
					</uni-list-item>
					<view class="example-body">
						<view class="">图片或视频</view>
						<!-- <uni-file-picker limit="9" title="" mode="grid" @select="select" @progress="progress" @success="success" @fail="fail"></uni-file-picker> -->
							<cl-upload v-model="uploadList" action="uniCloud"></cl-upload>
						<!-- <cl-upload v-model="uploadList" :add="false" :remove="false"></cl-upload> -->
					</view>
				</uni-list>
			</uni-section>
		</view>
		<view class="fillLogs_button">
			<button type="submit">提交</button>
		</view>
	</view>
</template>

<script>
import { watch } from 'vue';
export default {
	components: {},
	data() {
		return {
			uploadList:[],
			inputClearValue: '',
			formData: {
				selectedArr: []
			},
			listData: [
				{
					value: 1,
					text: '坝体',
					children: [
						{
							value: 3,
							text: '住霸体'
							// disabled: true
						},
						{
							value: 4,
							text: '住霸体1'
							// disabled: true
						},
						{
							value: 5,
							text: '住霸体2'
							// disabled: true
						}
					]
				},
				{
					value: 2,
					text: '城市2',
					children: [
						{
							value: 6,
							text: '街道2'
						},
						{
							value: 8,
							text: '街道2'
						},
						{
							value: 9,
							text: '街道2'
						}
					]
				},
				{
					value: 7,
					text: '城市3'
					// visible: false
				}
			],
			tabBarHeight: '',
			inputValue: [],
			matchedData: ''
		};
	},
	watch: {
		inputValue(newVal, oldVal) {
			console.log('输入值发生变化:', newVal, oldVal);
			// 在此处添加你需要在值变化时执行的代码
			this.matchedData = this.findMatches(this.listData, newVal);
			console.log(matchedData, '222');
		}
	},
	onLoad() {
		const tabBar = document.querySelector('.uni-section-header');
		this.tabBarHeight = tabBar.offsetHeight;
		console.log(`tabBar 高度为 ${this.tabBarHeight}px`);
	},
	methods: {
		triggerComponentMethod() {
			this.$refs.customTreeSelect.open(); // 调用子组件方法
		},
		matchedIcon(item) {
			console.log(this.matchedData, 'this.matchedData');
			console.log(item, 'item');
			this.matchedData = this.matchedData.filter((r) => r.value !== item.value);
		},
		findMatches(list, values) {
			const matches = [];
			function recursiveFind(dataList) {
				dataList.forEach((item) => {
					if (values.includes(item.value)) {
						matches.push(item);
					}
					if (item.children) {
						recursiveFind(item.children);
					}
				});
			}

			recursiveFind(list);
			return matches;
		}
	}
};
</script>

<style scoped lang="scss">
/deep/ .uni-section {
	border-radius: 22rpx;
}
.taskFilling {
	padding: 20rpx;
	background: linear-gradient(to bottom, #e6f0ff, #f1f1f1);
}

.insContent {
	margin-top: 10rpx;
}

.margin-bottom {
	margin-bottom: 100rpx;
	margin-top: 20rpx;
}

.fillLogs_button {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100rpx;
	background-color: rgba(255, 255, 255, 0.1);
}
.fillLogs_button button {
	width: 50%;
	background-color: #2e87ff;
	color: #fff;
	border-radius: 20rpx;
}

.fillLogs_button button:hover {
	background-color: #2e87ff;
	box-shadow: 0px 0px 20px -18px;
}

.fillLogs_button button:active {
	transform: scale(0.95);
}

.footerText {
	color: red;
	font-size: 22rpx;
}

.uni-input {
	width: 100rpx;
}

.increase {
	padding: 0 25rpx 40rpx 40rpx;
	text-align: center;
	color: #2e87ff;
}

.increaseStyle {
	position: relative;
}

.increase {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: #fff;
}

.custom-tree-select-content {
	max-height: 75rpx !important;
}
</style>
